<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能起名 - 结合生辰八字的传统智慧</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Noto Serif SC', 'Microsoft YaHei', serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #2d3748;
            min-height: 100vh;
            line-height: 1.6;
        }

        /* 古风装饰元素 */
        .ancient-decoration {
            position: fixed;
            opacity: 0.1;
            z-index: 0;
        }

        .top-left {
            top: 5%;
            left: 5%;
            font-size: 8rem;
            color: #6a11cb;
            transform: rotate(-15deg);
        }

        .bottom-right {
            bottom: 5%;
            right: 5%;
            font-size: 6rem;
            color: #2575fc;
            transform: rotate(15deg);
        }

        /* 主容器 */
        .main-container {
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
            z-index: 1;
        }

        /* 头部区域 */
        .header-section {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }

        .header-title {
            font-size: 3rem;
            font-weight: 700;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
            position: relative;
        }

        .header-subtitle {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 2rem;
        }

        .philosophy-text {
            max-width: 600px;
            margin: 0 auto;
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        /* 起名表单区域 */
        .naming-form-section {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .form-sidebar {
            background: rgba(255, 255, 255, 0.9);
            padding: 2rem;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid #e2e8f0;
        }

        .form-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            font-weight: 500;
            margin-bottom: 0.5rem;
            color: #555;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #6a11cb;
            box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.1);
        }

        .generate-btn {
            width: 100%;
            padding: 1rem;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            margin-top: 1rem;
            position: relative;
            overflow: hidden;
        }

        .generate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(106, 17, 203, 0.3);
        }

        .generate-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .generate-btn:hover::before {
            left: 100%;
        }

        /* 起名结果区域 */
        .naming-results {
            background: rgba(255, 255, 255, 0.9);
            padding: 2rem;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid #e2e8f0;
        }

        .results-title {
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 2rem;
            text-align: center;
            color: #333;
        }

        .results-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .name-card {
            background: #f8fafc;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: 1.5rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .name-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            border-color: #6a11cb;
        }

        .name-card.favorite {
            background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
            border-color: #ffc107;
        }

        .name-main {
            font-size: 1.5rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 0.5rem;
            text-align: center;
        }

        .name-details {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.5;
            margin-bottom: 1rem;
        }

        .name-actions {
            display: flex;
            justify-content: space-between;
            gap: 0.5rem;
        }

        .name-btn {
            flex: 1;
            padding: 0.5rem;
            border: none;
            border-radius: 6px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .favorite-btn {
            background: #e9ecef;
            color: #666;
        }

        .favorite-btn:hover,
        .name-card.favorite .favorite-btn {
            background: #ffc107;
            color: #333;
        }

        .copy-btn {
            background: #e9ecef;
            color: #666;
        }

        .copy-btn:hover {
            background: #6a11cb;
            color: white;
        }

        /* 五行属性显示 */
        .wuxing-section {
            margin-top: 2rem;
            padding: 1.5rem;
            background: #f0f8ff;
            border-radius: 12px;
            border-left: 4px solid #6a11cb;
        }

        .wuxing-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #333;
        }

        .wuxing-display {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .wuxing-item {
            padding: 0.5rem 1rem;
            background: rgba(106, 17, 203, 0.1);
            border-radius: 20px;
            font-size: 0.9rem;
            color: #6a11cb;
            border: 1px solid rgba(106, 17, 203, 0.2);
        }

        /* 底部说明 */
        .footer-info {
            text-align: center;
            margin-top: 3rem;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 12px;
            border: 1px solid #e2e8f0;
        }

        .footer-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #333;
        }

        .footer-text {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.6;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .main-container {
                padding: 1rem;
            }

            .header-title {
                font-size: 2em;
            }

            .naming-form-section {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .philosophy-text {
                font-size: 0.9rem;
            }

            .name-main {
                font-size: 1.3rem;
            }

            .ancient-decoration {
                display: none;
            }
        }

        /* 动画效果 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-item {
            animation: fadeInUp 0.6s ease-out;
        }

        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }
        .delay-4 { animation-delay: 0.4s; }
        .delay-5 { animation-delay: 0.5s; }
    </style>
</head>
<body>
    <!-- 古风装饰元素 -->
    <div class="ancient-decoration top-left">☰</div>
    <div class="ancient-decoration bottom-right">☷</div>

    <div class="main-container">
        <!-- 头部区域 -->
        <section class="header-section">
            <h1 class="header-title animate-item">AI智能起名</h1>
            <p class="header-subtitle animate-item delay-1">融合生辰八字与AI智慧的传统起名艺术</p>
            <div class="philosophy-text animate-item delay-2">
                <strong>起名理念：</strong>结合《易经》八卦理论、五行相生相克原理，运用现代人工智能技术，
                为您宝宝提供既符合传统美学又具有现代气息的名字选择。
            </div>
        </section>

        <!-- 起名表单区域 -->
        <section class="naming-form-section">
            <!-- 左侧表单 -->
            <div class="form-sidebar animate-item delay-3">
                <h3 class="form-title">📝 基本信息</h3>

                <div class="form-group">
                    <label for="birth-date">宝宝生辰</label>
                    <input type="datetime-local" id="birth-date" required>
                </div>

                <div class="form-group">
                    <label for="father-name">父亲姓氏</label>
                    <input type="text" id="father-name" placeholder="请输入父亲姓氏" required>
                </div>

                <div class="form-group">
                    <label for="mother-name">母亲姓氏</label>
                    <input type="text" id="mother-name" placeholder="请输入母亲姓氏">
                </div>

                <div class="form-group">
                    <label for="baby-gender">宝宝性别</label>
                    <select id="baby-gender">
                        <option value="undefined">不限</option>
                        <option value="boy">男</option>
                        <option value="girl">女</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="preferred-style">风格偏好</label>
                    <select id="preferred-style">
                        <option value="classical">古典雅致</option>
                        <option value="modern">现代简约</option>
                        <option value="poetic">诗意唯美</option>
                        <option value="strength">大气磅礴</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="keywords">关键词</label>
                    <textarea id="keywords" rows="3" placeholder="希望包含的字词（可选）"></textarea>
                </div>

                <button class="generate-btn" onclick="generateNames()">
                    ✨ 生成名字
                </button>
            </div>

            <!-- 右侧结果 -->
            <div class="naming-results animate-item delay-4">
                <h3 class="results-title">🎨 推荐名字</h3>

                <div class="results-grid" id="resultsGrid">
                    <!-- 名字卡片将在这里动态生成 -->
                    <div class="name-card">
                        <div class="name-main">等待生成...</div>
                        <div class="name-details">请填写宝宝信息并点击生成</div>
                    </div>
                </div>

                <!-- 五行属性显示 -->
                <div class="wuxing-section" id="wuxingSection" style="display: none;">
                    <h4 class="wuxing-title">五行属性分析</h4>
                    <div class="wuxing-display" id="wuxingDisplay">
                        <!-- 五行属性将在这里显示 -->
                    </div>
                </div>
            </div>
        </section>

        <!-- 底部说明 -->
        <section class="footer-info animate-item delay-5">
            <h4 class="footer-title">📖 起名智慧</h4>
            <p class="footer-text">
                本系统融合了《易经》八卦、五行相生相克、生肖喜忌等传统起名理论，
                结合现代人工智能算法，为您智能推荐最适合宝宝的名字。
                每个名字都经过精心计算，确保音韵优美、寓意吉祥、五行平衡。
            </p>
        </section>
    </div>

    <script>
        // 模拟古代智慧的起名算法
        const nameData = {
            classical: ['子轩', '子涵', '诗涵', '俊熙', '思源', '文博', '雅静', '景天'],
            modern: ['星辰', '晨曦', '云端', '光影', '未来', '子墨', '若曦', '浩宇'],
            poetic: ['清扬', '婉约', '流萤', '听雨', '望月', '听风', '墨染', '初晴'],
            strength: ['天行', '浩然', '擎天', '烽火', '星辰', '燎原', '正德', '致远']
        };

        const meanings = {
            '子轩': '才俊之子，气宇轩昂',
            '子涵': '才情文雅，包容万物',
            '星辰': '如星辰般闪耀璀璨',
            '晨曦': '清晨的阳光，充满希望',
            '清扬': '清新悠扬，心境开阔',
            '天行': '天道运行，自强不息',
            '俊熙': '英俊潇洒，光明磊落'
        };

        // 生成名字函数
        function generateNames() {
            const birthDate = document.getElementById('birth-date').value;
            const fatherName = document.getElementById('father-name').value;
            const motherName = document.getElementById('mother-name').value;
            const style = document.getElementById('preferred-style').value;
            const keywords = document.getElementById('keywords').value;

            if (!birthDate || !fatherName) {
                alert('请填写宝宝生辰和父亲姓氏！');
                return;
            }

            // 模拟AI分析过程
            showLoading();

            setTimeout(() => {
                const selectedNames = nameData[style].slice(0, 6);
                const results = selectedNames.map((name, index) => {
                    const fullName = fatherName + name;
                    return {
                        id: Date.now() + index,
                        name: fullName,
                        meaning: meanings[name] || '寓意美好，吉祥如意',
                        isFavorite: false,
                       五行属性: ['金', '木', '水', '火', '土'][index % 5]
                    };
                });

                displayResults(results);
                displayWuxingAnalysis(results);
            }, 2000);
        }

        // 显示加载状态
        function showLoading() {
            const grid = document.getElementById('resultsGrid');
            grid.innerHTML = '<div class="name-card"><div class="name-main">⚡</div><div class="name-details">AI正在分析五行八字...</div></div>';
        }

        // 显示结果
        function displayResults(results) {
            const grid = document.getElementById('resultsGrid');
            grid.innerHTML = results.map(result => `
                <div class="name-card" data-id="${result.id}">
                    <div class="name-main">${result.name}</div>
                    <div class="name-details">${result.meaning}</div>
                    <div class="name-actions">
                        <button class="name-btn favorite-btn" onclick="toggleFavorite(${result.id})">
                            ${result.isFavorite ? '❤️' : '🤍'}
                        </button>
                        <button class="name-btn copy-btn" onclick="copyToClipboard('${result.name}')">📄</button>
                    </div>
                </div>
            `).join('');
        }

        // 显示五行分析
        function displayWuxingAnalysis(results) {
            const wuxingSection = document.getElementById('wuxingSection');
            const wuxingDisplay = document.getElementById('wuxingDisplay');

            const wuxingMap = {};
            results.forEach(result => {
                const wuxing = result['五行属性'];
                wuxingMap[wuxing] = (wuxingMap[wuxing] || 0) + 1;
            });

            wuxingDisplay.innerHTML = Object.keys(wuxingMap).map(wuxing => `
                <span class="wuxing-item">
                    ${wuxing}: ${wuxingMap[wuxing]}个
                </span>
            `).join('');

            wuxingSection.style.display = 'block';
        }

        // 切换收藏
        function toggleFavorite(id) {
            const card = document.querySelector(`[data-id="${id}"]`);
            const btn = card.querySelector('.favorite-btn');
            const isFavorite = btn.textContent.includes('❤️');

            btn.innerHTML = isFavorite ? '🤍' : '❤️';
            card.classList.toggle('favorite', !isFavorite);
        }

        // 复制到剪贴板
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(() => {
                alert(`已复制: ${text}`);
            });
        }

        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            const items = document.querySelectorAll('.animate-item');
            items.forEach((item, index) => {
                setTimeout(() => {
                    item.style.opacity = '1';
                }, index * 100);
            });
        });
    </script>
</body>
</html>